<template>
    <div class=" header main">
        <span id="header">
                        <span>
                            <span>{{mname}}</span>
                            <el-button type="primary" plain v-if="this.principal === null" @click="dd1()" style="height: 37px;width: 70px">登录</el-button>
                            <el-button type="info" plain v-else @click="output()" style="height: 37px;width: 70px">注销</el-button>
                        </span>
                    </span>
        <div style="width: 80%">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     active-text-color="red"
                     style="font-weight:bold">
                <el-menu-item index="2" @click="$router.push('/shouye')">首页</el-menu-item>
                <el-menu-item index="1" @click="$router.push('/product')">商品展示</el-menu-item>
                <el-menu-item index="3" @click="$router.push('/activity')">专享活动</el-menu-item>
                <el-menu-item index="4" @click="$router.push('/shoppingCart')">购物车</el-menu-item>
                <el-menu-item index="5" @click="$router.push('/personalCenter')">个人中心</el-menu-item>
            </el-menu>
        </div>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tbody>
            <tr>
                <td class="topb">
                    <img src="../assets/img/1002.jpg" width="100%">
                </td>
            </tr>
            </tbody>
        </table>

<!--        <center>-->
<!--        <table width="70%" border="0" cellpadding="0" cellspacing="0" >-->

<!--            <br/>-->
<!--            <tr>-->
<!--                <td style="vertical-align:top;width: 20%">-->
<!--                    <div style="width: 400px;height: 260px; margin:10px auto;"-->
<!--                         v-for="(l,item) in list" :key="item" >-->
<!--                        <img style="width:348px;height: 240px" class="productPicWidth" :src="getUrl(l.picPath)" alt="">-->
<!--                    </div>-->
<!--                </td>-->

<!--                <td style="vertical-align:top;width: 50%;">-->
<!--                    <div style="height: 260px;margin:10px auto;text-align:left;" v-for="(i,index) in list" :key="index">-->
<!--                        <br/><br/>-->
<!--                        <hr/>-->
<!--                        <h3 style="color: #52c9ff" @click="$router.replace({name:'xq',params:{tid:i.tid}})">{{i.labelName}}</h3>-->
<!--                        <span class="price">￥ <strong>{{i.price}}</strong></span>-->
<!--                        <p>商品描述:{{i.shortDesc}}</p>-->
<!--                        <hr/>-->
<!--                        <br/><br/>-->
<!--                    </div>-->
<!--                </td>-->

<!--                <td style="vertical-align:top;width: 20%;">-->
<!--                    <div style="height: 260px;margin:10px 10px;text-align:left;"  v-for="(i,index) in list" :key="index">-->
<!--                        <br/><br/><br/>-->
<!--                        <el-button type="warning" round @click="" plain style="width: 150px">加入购物车</el-button>-->
<!--                        <br/><br/><br/>-->
<!--                        <el-button type="danger" round @click="" plain style="width: 150px">立即购买</el-button>-->

<!--                    </div>-->
<!--                </td>-->
<!--            </tr>-->

<!--            <tr>-->
<!--                <td colspan="3">-->
<!--                    <img src="../assets/img/2006.jpg" width="100%">-->
<!--                </td>-->
<!--            </tr>-->
<!--        </table>-->
<!--        </center>-->

        <!-- 猜你喜欢开始 -->
        <div id="xihuang" class="zcdh" >
            <br/>
            <br/>

            <div class="xihuang3" >
                <div class="xihuang4 xihuang4-8"  v-for="(value,index) in list" :key="index">
                    <div class="xihuang4-1" >
                        <img :src="getUrl(value.picPath)"
                             style=" width: 210px;height: 210px;"
                             alt=""

                             @click="$router.replace({name:'xq',params:{tid:value.tid}})"
                        >
                            <!-- @click="$router.push({path:'/xq',query:{tid:value.tid}})"-->
                    </div>
                    <div class="xihuang4-2">{{value.labelName}}</div>
                    <h1>价格:{{value.price}}</h1>
                </div>
            </div>
        </div>


        <br/><br/><br/>
<!--        底部-->
        <div>
            <div class="img">
                <img src="../assets/img/d0.png" style="width: 100%;">
            </div>
            <div class = "under">
                <a href="#" target="_blank" rel="nofollow">免费声明 </a>
                <a href="#" target="_blank" rel="nofollow">关于我们 </a>
                <a href="#" target="_blank" rel="nofollow">支付方式 </a>
                <a href="#" target="_blank" rel="nofollow">联系我们 </a>
                <a href="#" target="_blank" rel="nofollow">营业执照 </a>
                <a href="#" target="_blank" rel="nofollow">服务条款 </a>
            </div>
            <br>
            <div class="img">
                <img src="../assets/img/d1.png" style="width: 100%;">
            </div>
            <div class="footer-edit">
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">Copyright © 1999 河南AAA有限公司 地址：郑州市新郑市AAA软件教育</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);"> 本网站部分图片来源于网络,如有侵权请联系我们,我们会尽快处理&nbsp;</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">&nbsp;</span>
                    <a href="http://www.baidu.com" target="_blank" style="color: rgb(165, 165, 165);">郑州昆旅国际旅行社太康路营业部</a></p>
                <p style="line-height: 1.0em;">
                <span style="color: rgb(165, 165, 165);">服务热线0371-888888&nbsp;
                    <span style="color: rgb(165, 165, 165);">微信：18838965238&nbsp; 15981917089&nbsp;</span>
                    在线QQ：1479430525&nbsp; 1479430525&nbsp; &nbsp;</span></p>
                <p style="line-height: 1.0em;">
                    <a href="https://www.baidu.com" target="_blank"></a>
                    <span style="color: rgb(165,165,165);">
                        <span style="color: rgb(153, 153, 153); font-family: PingFang SC;,Microsoft Yahei UI, Microsoft Yahei&quot;,Hiragino Sans GB;, Helvetica, STHeiti, sans-serif; background-color: rgb(249, 249, 249);">
                            旅行社业务经营许可证号 L-HEN-CJ00011
                        </span>
                    </span>
                    豫ICP备19990315号
                    <a/>
                </p>
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: "Product",
        data () {
            return {
                principal: sessionStorage.getItem("token"),
                mname:'已登录',
                list:null,
                activeIndex: '1',
            };
        },
        created() {
            this.$http.post("product/product/selectAll").then(data => {
                this.list = data;
            })
            if (this.principal === null){
                this.mname = "未登录"
            }
        },
        methods: {
            handleSelect (key, keyPath) {
                console.log(key, keyPath);
            },
            dd1(){
                this.$router.push('/login')
            },
            output(){
                this.$router.replace('product')
                sessionStorage.clear()
                localStorage.clear()
                this.$router.go(0)
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/product/product/findProductPicByPath?name=`+picPath;
            },
        },
    }
</script>

<style scoped>
    #header
    {
        position: absolute;
        top: 25px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 38px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 200px;
    }
    #header > span > button
    {
        position: absolute;
    }
    #header > span > span
    {
        padding: 0px 8px 16px 0px;
        line-height: 40px;
    }
    .xihuang1 {
        height: 70px;
        width: 1230px;
        /* 	background-color: yellow; */
        margin: 0 auto;
        overflow: hidden;
    }

    .xihuang2 {
        width: 106px;
        height: 30px;
        /* 	background-color: red; */
        margin: 0 auto;
        margin-top: 20px;

    }

    .xihuang1 h1 {
        font-size: 16px;
        text-align: center;
    }

    .xihuang3 {
        width: 1230px;
        height: 652px;
        /* 	background-color: #d0d0d0; */
        margin: 0 auto;
    }

    .xihuang4 {
        width: 239px;
        height: 319px;
        background-color: #fff;
        overflow: hidden;
        float: left;
        margin-left: 8px;
        margin-bottom: 8px;
    }

    .xihuang4-1 {
        width: 210px;
        height: 210px;
        /* background-color: red; */
        margin: 0 auto;
        margin-top: 5px;
    }

    .xihuang4-2 {
        width: 210px;
        /* height: 36px; */
        /* 	background-color: #FF55f5; */
        margin: 0 auto;
        margin-top: 15px;
    }

    .xihuang4 h1 {
        font-size: 14px;
        color: #ff0036;
        margin-left: 12px;
        margin-top: 2px;
    }

    .xihuang4-8 {
        margin-left: 0px;
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
    . font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
</style>
